import logo from "@/assets/imgs/halg_logo_icon_@2x.png"
import slogn from "@/assets/imgs/slogn_word_icon_@2x.png"
import { useCallback, useEffect, useState } from "react"
import { useNavigate } from "react-router-dom"

function Guide() {
	const [opacity, setOpacity] = useState("opacity-0")
	useEffect(() => {
		setOpacity("opacity-1")
	}, [])

	const navigateTo = useNavigate()
	const handleArrowClick = useCallback(() => {
		navigateTo("/login")
	}, [navigateTo])

	return (
		<div
			className={`guide-page w-[100vw] h-[100vh] bg-white ${opacity} transition-all duration-[1500ms] relative`}
		>
			<img
				className="block box-content w-[.8653rem] h-[.7053rem] pt-[.93rem] pb-[.2947rem] my-0 mx-auto"
				src={logo}
				alt="欢乐购"
			/>
			<p className="text-[#242424] text-[.2rem] leading-[0.23rem] tracking-normal text-center">
				欢乐购
			</p>
			<img
				className="block box-content w-[2.02rem] h-[1.18rem] mt-[1.73rem] mb-[1.76rem] mx-auto"
				src={slogn}
				alt=""
			/>
			<div
				className="iconfont text-center text-[#73D13D] text-[.2rem] leading-[.2rem] font-bold absolute left-0 right-0 bottom-[.73rem]"
				onClick={handleArrowClick}
			>
				&#xe60c;
			</div>
		</div>
	)
}

export default Guide
